<template>
  <!-- 编辑 -->
  <el-dialog
    v-if="visible"
    v-el-drag-dialog
    title="审核客户"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <el-tabs v-model="activeTabName">
      <el-tab-pane name="customer">
        <span slot="label"><i class="el-icon-user" /> 客户信息</span>
        <clientInformation ref="clientInformation" :csm-lerel="csmLerel" :tree-data="treeData" :customer-type-map="customerTypeMap" :new-from-map="newFromMap" :csm-status-map="csmStatusMap" :csm-level-map="csmLevelMap" :csm-new-type-map="csmNewTypeMap" :acc-csmcard-card-status-map="accCsmcardCardStatusMap" :temp="temp" />
      </el-tab-pane>
      <el-tab-pane name="contaction">
        <span slot="label"><i class="el-icon-phone-outline" /> 电话和地址信息</span>
        <edit-contaction ref="editContaction" :csm-lerel="csmLerel" :tree-data="treeData" :customer-type-map="customerTypeMap" :new-from-map="newFromMap" :csm-status-map="csmStatusMap" :csm-level-map="csmLevelMap" :csm-new-type-map="csmNewTypeMap" :acc-csmcard-card-status-map="accCsmcardCardStatusMap" :temp="temp" />
      </el-tab-pane>
      <el-tab-pane name="certification">
        <span slot="label"><i class="el-icon-mobile" /> 证件信息</span>
        <idInformation ref="idInformation" :csm-lerel="csmLerel" :customer-type-map="customerTypeMap" :new-from-map="newFromMap" :csm-status-map="csmStatusMap" :csm-level-map="csmLevelMap" :csm-new-type-map="csmNewTypeMap" :acc-csmcard-card-status-map="accCsmcardCardStatusMap" :temp="temp" :card-type-map="cardTypeMap" />
      </el-tab-pane>
      <el-tab-pane name="invoice">
        <span slot="label"><i class="el-icon-money" /> 发票信息</span>
        <invoice
          ref="invoice"
          :csm-lerel="csmLerel"
          :customer-type-map="customerTypeMap"
          :new-from-map="newFromMap"
          :csm-status-map="csmStatusMap"
          :csm-level-map="csmLevelMap"
          :csm-new-type-map="csmNewTypeMap"
          :acc-csmcard-card-status-map="accCsmcardCardStatusMap"
          :temp="temp"
          :invocie01="invocie01"
          :invocie02="invocie02"
        />
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button type="primary" @click="success(2)">
        保存并审核
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { selectAreaCode, queryCsmLevelMap, queryMap, queryAddCsmDefaultData, customerUpdate } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import EditContaction from './TabEditContaction'
  import IdInformation from './IdInformation'
  import Invoice from './Invoice'
  import ClientInformation from './ClientInformation'
  import moment from 'dayjs'

  export default {
    name: 'add-csm',
    components: {
      EditContaction, IdInformation, Invoice, ClientInformation
    },
    props: {
      parentFetchData: {
        type: Function
      }
    },
    data() {
      return {
        activeTabName: 'customer',
        treeData: [],
        customerTypeMap: [],
        newFromMap: [],
        csmStatusMap: [],
        csmLevelMap: [],
        csmNewTypeMap: [],
        accCsmcardCardStatusMap: [],
        cardTypeMap: [],
        invocie01: [],
        invocie02: [],
        csmLerel: 0,
        ck: 0,
        visible: false,
        temp: {
          area: [],
          csmName: '',
          csmCode: '',
          csmStatus: 0,
          csmType: 1,
          gasNature: '',
          csmRgPhone: '',
          contact: '',
          orgName: '',
          csmFloor: 1,
          unCheckQuality: '',
          sfzh: '',
          sfzName: '',
          sfzAddress: '',
          cardType: '',
          cardNo: '',
          newType: 2,
          defaultPaymentMethod: 1,
          newFrom: 8,
          salesmanName: '',
          isPickUp: 0,
          settlementType: 1,
          createTime: moment(),
          contractNumber: '',
          decimalSpare1: '',
          intSpare2: '',
          strSpare1: '',
          strSpare2: '',
          strSpare3: '',
          strSpare4: ''
        },
        addressProps: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { level, value } = node
            mergeAsyncFunc(selectAreaCode, { areaCode: value || 0 })
              .then((res) => {
                const nodes = res.data.map(item => ({
                  value: item.areaCode,
                  label: item.areaName,
                  leaf: level >= 2
                }))
                resolve(nodes)
              })
              .catch(() => {
                node.loading = false
                node.loaded = false
              })
          }
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList',
        'corpSettingData'
      ])
    },
    async created() {

    },
    mounted() {

    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerFromPlat' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerStatus' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerNewType' }), mergeAsyncFunc(queryMap, { enumName: 'AccCsmcardCardStatus' })])
        this.customerTypeMap = res1.data // 客户类型
        this.newFromMap = res2.data // 客户来源
        this.csmStatusMap = res3.data // 客户状态
        this.csmNewTypeMap = res4.data // 开户类型
        this.accCsmcardCardStatusMap = res5.data // 充值卡状态
      },
      // 证件类型
      async getDefaultData() {
        const res = await queryAddCsmDefaultData({
          csmCode: this.temp.csmCode,
          audit: 0
        })
        this.cardTypeMap = JSON.parse(res.data.cardType)
      },
      // 查询客户等级枚举
      async getCsmLevelMap() {
        const res = await mergeAsyncFunc(queryCsmLevelMap)
        this.csmLevelMap = JSON.parse(res.data.customerQuality)
        this.csmLerel = Number(res.data.csmLerel)
      },
      async open(query, query01, query02) {
        await Promise.all([this.getTreeData(), this.queryOptionsMap(), this.getCsmLevelMap(), this.getDefaultData()])
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.activeTabName = 'customer'
          if (query) {
            this.temp = Object.assign(this.temp, query.data)
          }
          if (query01) {
            this.invocie01 = Object.assign(this.invocie01, query01.data)
          }
          if (query02) {
            this.invocie02 = Object.assign(this.invocie02, query02.data)
          }
        })
      },
      async depositRegister() {
        this.visible = false
        await this.$refs.normalReceiptsAdd.open()
      },
      async success(type) {
        this.temp.csmStatus = type
        const code = {
          ...this.temp,
          ...this.invocie01,
          ...this.invocie02
        }
        console.log(code)
        const res = await customerUpdate(code)
        console.log(res)
        if (res.success) {
          this.parentFetchData({})
        }
        this.visible = false
      },
      // 定位
      async location() {
        const res = await this.$refs.location.open()
        console.log('详细地址信息', res)
      },
      reset() {
        this.activeTabName = 'customer'
        this.visible = false
        this.temp = {
          area: [],
          csmName: '',
          csmCode: '',
          csmType: 1,
          gasNature: '',
          csmRgPhone: '',
          contact: '',
          orgName: '',
          csmFloor: 1,
          unCheckQuality: '',
          sfzh: '',
          sfzName: '',
          sfzAddress: '',
          cardType: '',
          cardNo: '',
          newType: 2,
          defaultPaymentMethod: 1,
          newFrom: 8,
          salesmanName: '',
          isPickUp: 0,
          settlementType: 1,
          createTime: '',
          contractNumber: '',
          decimalSpare1: '',
          intSpare2: '',
          strSpare1: '',
          strSpare2: '',
          strSpare3: '',
          strSpare4: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
